<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Build a Personal Portfolio Webpage</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
        crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
</head>

<body>
    <!-- 头部 -->
    <header id="banner" class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <a href="#top" class="scrollable">
                <img src="img/qlip.png" alt="qlip" title="qlip">
            </a>
        </div>
        <nav id="navbar" class="collapse navbar-collapse" role="navigation">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#top" class="scrollable">ABOUT</a></li>
                <li><a href="#portfoloi" class="scrollable">PORTFOLIO</a></li>
                <li><a href="#contact" class="scrollable">CONTACT</a></li>
            </ul>
        </nav>
    </header>

    <a href="#" id="top" name="home"></a>

    <!-- 内容 -->
    <main>
        <header id="about">
            <div class="intro-text">
                <p>Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy,
                    and creative direction; devoted to functional programming and information architecture.</p>
                <hr class="star-bright">
                <span>Web Developer - User Experience Designer - Graphic Artist</span>
            </div>
            <img src="img/avatar.jpg" alt="author" title="author">
        </header>

        <section id="portfoloi">
            <h2>PORTFOLIO</h2>
            <hr class="star-dark">
            <ul class="grid">
                <li><img src="img/1.jpg" alt="pic1"></li>
                <li><img src="img/2.jpg" alt="pic2"></li>
                <li><img src="img/3.jpg" alt="pic3"></li>
                <li><img src="img/4.jpg" alt="pic4"></li>
                <li><img src="img/5.jpg" alt="pic5"></li>
                <li><img src="img/6.jpg" alt="pic6"></li>
            </ul>
        </section>
        
        <section id="contact">
            <h2>CONTACT ME</h2>
            <hr class="star-dark">
            <div>
                <form id="contactForm" novalidate="">
                    <div class="form-item">
                        <label for="name">Name</label>
                        <input type="text" name="name" id="name" required="" placeholder="Name">
                    </div>
                    <div class="form-item">
                        <label for="email">Email Address</label>
                        <input type="email" name="email" id="email" required="" placeholder="Email Address">
                    </div>
                    <div class="form-item">
                        <label for="phone">Phone Number</label>
                        <input type="phone" name="phone" id="phone" required="" placeholder="Phone Number">
                    </div>
                    <div class="form-item">
                        <label for="message">Message</label>
                        <textarea name="message" id="message" rows="5" required="" placeholder="Message"></textarea>
                    </div>
                    <hr>
                    <button type="submit">Send</button>
                </form>
                <p>Want to get in touch with me? Be it to request more info about myself or my experience, to ask for my resume,
                    tips on how to solve your sudoku, random questions about the universe and the meaning of life, or even
                    if only for some nice Fika here in stunning Toronto... just feel free to drop me a line anytime.
                </p>
                <p>I promise to reply A.S.A.P.</p>
                <p>Note: No spam/soliciting pour moi, merci :)</p>
            </div>
        </section>
    </main>

    <!-- 底部 -->
    <footer>
        <div id="footer-above">
            <div>
                <h3>ABOUT THIS PAGE</h3>
                <p>
                    Made with <i class="fa fa-fw fa-coffee"></i> and <i class="fa fa-fw fa-music"></i><br> by <a href="#">Awebone</a>.
                </p>
            </div>
            <div>
                <h3>AROUND THE WEB</h3>
                <ul>
                    <li><a href="https://www.linkedin.com/" class="button social"><i class="fa fa-fw fa-linkedin"></i></a></li>
                    <li><a href="'https://github.com/" class="button social"><i class="fa fa-fw fa-github"></i></a></li>
                    <li><a href="https://twitter.com/" class="button social"><i class="fa fa-fw fa-twitter"></i></a></li>
                    <li><a href="https://www.flickr.com/" class="button social"><i class="fa fa-fw fa-flickr"></i></a></li>
                </ul>
            </div>
        </div>
        <div id="footer-below">
            <p>qlip © 2017. All Rights Reversed</p>
        </div>
    </footer>
</body>

</html>